<html>
    <head>
        <title>Text Derection</title>

        <style>
            body {
                text-align: center;
            }
            .box {
                border: 1px solid;
                display: inline-flex;
                width: auto;
                padding: 20px;
            }
            .right {
                width: 400px;
                padding: 30px 20px;
                border: 1px solid #ccc;
            }
            .left {
                padding: 20px 30px;
                border: 1px solid #ccc;
                writing-mode: vertical-rl;
                margin-left: 20px;
            }
            p {
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="right">
                <h1>Heading</h1>
                <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
            </div>
            <div class="left">
                <h1>Heading</h1>
                <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
            </div>
        </div>
    </body>
</html>